<template>
	<view>
		<uni-nav-bar :statusBar="true" dark title="添加球员" fixed left-icon="left" @clickLeft="clickLeft">
		</uni-nav-bar>
		<view>
			<view class="header_box">
				<image v-if="url" :src="imageUrl + url" mode=""></image>
				<image v-else src="@/static/user.jpg" mode=""></image>
				<view>
					<text>{{name}}</text>
				</view>
			</view>
		</view>


		<view class="content">
			<uni-forms class="form" ref="baseForm" :modelValue="baseFormData" :rules="customRules">

				<uni-forms-item class="logo" labelWidth="240rpx" label="球员头像"  name="profilePicture">
					<uni-file-picker :value="selectcoachPhoto" :autoUpload="false" limit="1" :del-icon="false"
						disable-preview :imageStyles="imageStyles" file-mediatype="image" @progress="progress"
						@select="select">选择</uni-file-picker>
				</uni-forms-item>
				<uni-forms-item labelWidth="240rpx" label="姓名" required name="name">
					<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
				</uni-forms-item>
				
				<uni-forms-item labelWidth="240rpx" label="球衣号码" required name="playerNumber">
					<uni-easyinput type="number" v-model="baseFormData.playerNumber" placeholder="请输入球衣号码" />
				</uni-forms-item>
				<uni-forms-item labelWidth="240rpx" label="请选择证件类型"  name="documentType">
					<uni-data-select v-model="baseFormData.documentType" :localdata="documentTypeList"
						placeholder="请选择证件类型" @change="change">
					</uni-data-select>
				</uni-forms-item>
				<uni-forms-item labelWidth="240rpx" label="证件号码"  name="documentNumber">
					<uni-easyinput v-model="baseFormData.documentNumber" placeholder="请输入证件号码" />
				</uni-forms-item>
				<uni-forms-item labelWidth="240rpx" label="性别"  name="sex">
					<uni-data-select v-model="baseFormData.sex" :localdata="sexList" placeholder="请选择性别"
						@change="change">
					</uni-data-select>
				</uni-forms-item>
				<uni-forms-item labelWidth="240rpx" label="出生日期">
					<uni-datetime-picker type="date" :clear-icon="false" v-model="baseFormData.birthday"
						@maskClick="maskClick">
						<uni-easyinput v-model="baseFormData.birthday" placeholder="请输入出生日期" />
					</uni-datetime-picker>
				</uni-forms-item>
				<!--  -->
				<uni-forms-item labelWidth="240rpx" label="身高"  name="height">
					<uni-easyinput v-model="baseFormData.height" placeholder="请输入身高" />
				</uni-forms-item>
				<uni-forms-item labelWidth="240rpx" label="体重"  name="height">
					<uni-easyinput v-model="baseFormData.height" placeholder="请输入体重" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="bottomBtn">
			<button @click="onCreated" type="submit" class="submit">
				提交
			</button>
		</view>
	</view>
</template>

<script>
	import {addbasketballPlayer, uploadAvatar,getbasketballPlayerInfo} from '@/api/basketballTeam/index.js'
	import {imageUrl} from '@/config.js'
	
	export default {
		data() {
			return {
				name: '',
				url: '',
				documentTypeList: [
					{value: 1, text: '身份证'},
					{value: 2, text: '港澳居民往来大陆通行证'},
					{value: 3, text: '台湾居民往来大陆通行证'},
					{value: 4, text: '护照'},
				],
				sexList: [{
						value: 0,
						text: "男"
					},
					{
						value: 1,
						text: "女"
					}
				],
				baseFormData: {
					profilePicture: '',
					sex: '',
					name: '',
					documentNumber: '',
					documentType: '',
					playerNumber: '',
					height: ''
				},
				customRules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名'
						}]
					},
					playerNumber: {
						rules: [{
							required: true,
							errorMessage: '请输入球衣号'
						}]
					},
				},
				selectcoachPhoto: [],
				imageStyles: {
					width: '100rpx',
					height: '100rpx',
					border: {
						radius: '50%'
					}
				},
				type: '',
				id: '',
				imageUrl: imageUrl,
				player: ''
			}
		},
		methods: {
			clickLeft() {
				uni.navigateBack()
			},
			select(e) {
				console.log('选择文件：', e)
				uploadAvatar({file: e.tempFiles[0].file}).then(res => {
					this.baseFormData.profilePicture = res.data;
				})
			},
			onCreated() {
				console.log(this.baseFormData)
				this.$refs['baseForm'].validate().then(res => {
					addbasketballPlayer(this.type ? this.type : 'post', {...this.baseFormData, playerId:this.player, id: this.id}).then(res => {
						this.$modal.msg(res.msg)
						setTimeout(() => {
							uni.navigateBack()
						}, 600)
					})
				})
			}
		},
		onLoad({
			url,
			name,
			id,
			type,
			player
		}) {
			this.name = name;
			this.url = url;
			this.id = id
			this.type = type
			this.player = player
			if (type) {
				getbasketballPlayerInfo(id).then(res => {
					for (let key in this.baseFormData) {
						console.log(key)
						this.baseFormData[key] = res.data[key]
					}
					this.selectcoachPhoto = [{
						url: this.imageUrl + this.baseFormData.profilePicture
					} ]
					//console.log(this.baseFormData)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.header_box {
		display: flex;
		align-items: center;
		font-weight: 800;
		padding: 30rpx 20rpx;

		image {
			width: 120rpx;
			height: 120rpx;
			margin-right: 20rpx;
			border-radius: 100%;
		}
	}

	.content {
		padding: 30rpx 20rpx;

		.logo {
			display: flex;
			align-items: center;
			padding-bottom: 40rpx;
		}

		::v-deep.uni-select {
			border: none;

			.uni-select__input-placeholder {
				color: #999;
			}
		}
	}
	.bottomBtn {
		display: flex;
		justify-content: center;
		flex-direction: column;
		background-color: #fff;
		position: sticky;
		width: 100%;
		bottom: 0;
		padding: 40rpx 30rpx;
		padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
		border-top: 1px solid #eee;
		.submit-text {
			display: flex;
			
			font-size: 24rpx;
		}
		.submit {
			background-color: $btn-bg-color;
			color: #fff;
			width: 100%;
			font-size: 34rpx;
			font-weight: 800;
			margin-top: 20rpx;
		}
	}
</style>